<template>
  <div class="p-10px">
    <el-row :gutter="10" class="mb-10px">
      <el-button type="primary" plain @click="handleFile">{{ t('ossIndex.uploadModel') }}</el-button>
      <RightToolBar v-model:showSearch="showSearch" @queryTable="getList" />
      <ColumnFilter v-if="ossList.length" :is-operation="true" :cols="tableHeadColumns" @colChange="colChange" />
    </el-row>
    <el-table
      ref="refElTable"
      v-loading="loading"
      height="calc(100vh - 350px)"
      border
      :data="ossList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />

      <template v-for="item in tableHeadColumns">
        <el-table-column
          v-if="!item.isTemplate && item.showColumn"
          :key="item.prop"
          show-overflow-tooltip
          v-bind="item"
          :align="item.align || 'center'"
          :prop="item.prop"
          :label="item.label"
        />
        <!--文件展示-->
        <el-table-column
          v-if="item.prop === 'url' && item.isTemplate && item.showColumn"
          :key="item.prop"
          show-overflow-tooltip
          v-bind="item"
          align="center"
          :prop="item.prop"
          :label="item.label"
        >
          <template #default="{ row }">
            <el-image
              v-if="checkFileSuffix(row.fileSuffix)"
              style="width: 100px; height: 100px"
              :src="row.frontDillUrl"
              preview-teleported
              :preview-src-list="[row.frontDillUrl]"
            />
            <svg-icon v-else icon-class="job" class="imgStyle" />
          </template>
        </el-table-column>
      </template>

      <el-table-column :label="t('user.action')" align="center" width="80" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-tooltip :content="t('downModel.downText')" placement="top">
            <el-button link type="primary" icon="Download" size="large" @click="downloadFileItem(row)" />
          </el-tooltip>

          <el-tooltip :content="t('ossIndex.Upload_prediction')" placement="top">
            <el-button link type="primary" icon="Connection" size="large" @click="addModelPredict(row)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="columnSE">
      <Pagination
        v-show="totalNum > queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="totalNum"
        @pagination="getList"
      />
    </div>
    <AddEditModal ref="refAddEditModal" @getList="getList" />
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import AddEditModal from './UploadFileImage.vue'
import { ElMessage } from 'element-plus'
import { colChange, currentHook, handleSelectionChange } from './index-hook'
import { downloadConvertFile } from '@/api/system/convert'
import { getUploadList } from '@/api/system/upload'
//导入当前页面封装方法
import RightToolBar from '@/components/RightToolBar.vue'
import ColumnFilter from '@/components/ColumnFilter.vue'
import { uploadPredict } from '@/api/system/predict'
import { i18n } from '@/lang'
const { t } = i18n.global

const totalNum = ref(0)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})

// 下载模型文件
const downloadFileItem = async (row) => {
  downloadConvertFile(row.id).then((res) => {
    const blob = new Blob([res], { type: 'text/plain' })
    const filename = row.filename
    const url = URL.createObjectURL(blob)
    // 创建一个a标签用于下载文件
    const downloadLink = document.createElement('a')
    downloadLink.href = url
    downloadLink.download = filename // 指定下载文件名
    // 触发下载
    document.body.appendChild(downloadLink)
    downloadLink.click()
    // 清理并移除元素和对象URL
    document.body.removeChild(downloadLink)
    URL.revokeObjectURL(url)
  })
}

/** 上传文件 */
const handleFile = () => {
  refAddEditModal.value.showModal({ type: 0 })
}

//查询
const handleQuery = () => {
  queryParams.pageNum = 1
  getList(queryParams)
}

// 检查文件后缀
const checkFileSuffix = (fileSuffix) => {
  const arr = ['.stl', '.obj', '.ply']
  return arr.some((type) => {
    return fileSuffix.includes(type)
  })
}

// 获取表格数据
const getList = () => {
  loading.value = true
  const skip = (queryParams.pageNum - 1) * queryParams.pageSize
  getUploadList({
    page: skip,
    size: queryParams.pageSize
  }).then((res) => {
    loading.value = false
    if (res.code == 200) {
      ossList.value = res.data
      totalNum.value = res.total
    } else {
      ElMessage.error({
        message: res.message,
        duration: 2 * 1000
      })
    }
  })
}

//对模型AI预测
const addModelPredict = (row) => {
  uploadPredict(row.id).then((res) => {})
}

onMounted(() => handleQuery())

const { refAddEditModal, refElTable, loading, ossList, showSearch, tableHeadColumns, handleDeleteMul } = currentHook(
  queryParams,
  getList
)
</script>
